// 图片上传组件  
import React,{useState,useRef, useEffect} from "react";
import css from './index.module.scss';

interface uploadProps {
 fileSize:number;
}


function Upload({fileSize}:uploadProps){
 const [file,setFile] = useState<boolean>(true);
 const [imgData,setImgData] =useState(null);
 const upImg = useRef(null);


 const upChange = (ev:any)=>{
    console.log("ev.current.files",ev.currentTarget.files[0]);
    let imgfile = ev.currentTarget.files[0];
     // 判断文件大小
     if(imgfile.size>fileSize){
         alert('图片大小超出，请重新上传');
         upImg.current.value='';
     }else{
    // 第二种方式 将图片转化成Buffer数据流，Img不支持这种格式 但可以通过Blob将图片转成ObjectURL的类型，然后在放到img的src中
    let reader  = new FileReader();
    // 将imgfile文件转换为Base64的数据流  ps: readAsDataURL是一个异步函数 需要到onload的this.result去获取
      reader.readAsArrayBuffer(imgfile);
    //   if(reader.readyState==2){
    //       console.log("回显的图像文件",reader.result);
    //   }
    reader.onload= function(event){
        // if(reader.readyState)
      if(reader.readyState===2){
          
          let imgs = reader.result;
          console.log("回显buffer文件",imgs);
          setFile(false);
          let url = URL.createObjectURL(new Blob([imgs]));
          console.log(url);
          setImgData(url);
      }
    }
}

 }


useEffect(()=>{

},[])
    return <div className={css.bg}>
    <button className={css.click}  onClick={()=>upImg.current.click()}>{file?"点击上传":"重新上传"}</button>
     <img src={imgData} alt="" />
      <input type="file" accept="image/*"  onChange={(ev)=>upChange(ev)} style={{display:"none"}}  ref={upImg}/>
    </div>
    
}


export default Upload